<template>
      <div>
            <el-card>
                  <div slot="header">
                        <span>班级管理</span>
                        <el-button style="float: right;" size="mini" type="primary" icon="el-icon-plus" @click="dialogVisible=true;dialogTitle='添加';btnStatus=true">添加班级</el-button>
                  </div>
                  <div>
                          <!-- 用户信息展示部分 begin -->
                        <el-table :data="tableData" style="width: 100%" v-loading="treeLoading" stripe>
                              <el-table-column prop="classname" label="班级">
                              </el-table-column>
                              <el-table-column label="状态">
                                    <template slot-scope="{row}" prop="status">
                                          <span :class="row.status=='1'?'show':'hide'">{{row.status=='1'?'显示':'隐藏'}}</span>

                                    </template>
                              </el-table-column>
                              <el-table-column prop="" label="操作" align="center">
                                    <el-dropdown @command="select" slot-scope="{row}">
                                          <span class="el-icon-more" style="transform:rotate(90deg);cursor:pointer;"></span>
                                          <el-dropdown-menu slot="dropdown" align="center">
                                                <el-dropdown-item :command="{type:'edit',data:row}"><i class="el-icon-edit"></i> 编辑</el-dropdown-item>
                                                <el-dropdown-item :command="{type:'delete',id:row.id}"><i class="el-icon-delete"></i> 删除</el-dropdown-item>
                                          </el-dropdown-menu>
                                    </el-dropdown>
                              </el-table-column>
                        </el-table>
                        <!-- 用户信息展示部分 end -->

                        <!-- 分页 -->
                        <el-pagination style="margin-top:30px" :page-size="pagesize" :page-sizes="[1,2,5,10,15]" @size-change="onchange"  @current-change="getClassesList" :current-page.sync="currentPage" layout=" prev, pager, next,sizes,total" :total="total"></el-pagination>
                  </div>
            </el-card>

            <!-- 用户信息对话框 -->
            <el-dialog :title="dialogTitle" :visible.sync="dialogVisible" width="400px" @close="resetForm()">
                  <el-form ref="formData" :model="formData" label-width="80px" label-position="left" :rules="rules">
                        <el-form-item label="班级" prop="classname">
                              <el-input v-model="formData.classname"></el-input>
                        </el-form-item>
                        <el-form-item label="状态" prop="status">
                              <el-radio-group v-model="formData.status">
                                    <el-radio :label="1">未毕业</el-radio>
                                    <el-radio :label="0">已毕业</el-radio>
                              </el-radio-group>
                        </el-form-item>
                  </el-form>
                  <span slot="footer" class="dialog-footer">
                        <el-button @click="dialogVisible = false;">取 消</el-button>
                        <el-button type="primary" @click="classesAddComfire" :icon="btnIcon" :disabled="buttonDisabled" v-show="btnStatus">确 定</el-button>
                        <el-button type="primary" :icon="btnIcon" :disabled="buttonDisabled" @click="classesEditComfire" v-show="!btnStatus">确 定</el-button>
                  </span>

            </el-dialog>
      </div>
</template>
<script>
export default {
      data(){
            var classnameExist=(rule,value,cb)=>{
                  this.$http.get(`/classes/isexist?fieldname=classname&fieldvalue=${value}`).then((result)=>{
                  if(result.data.error==0 || value==this.oldvalue){
                        cb()
                  }else{
                        cb(new Error('班级已存在'))
                  }
            })
      };
             return {
            tableData: [],
            dialogVisible:false,
            btnIcon:'',
            buttonDisabled:false,
            dialogTitle:'',
            treeLoading:false,
            btnStatus:true,
            pagesize:5,
            currentPage:1,
            total:0,
            formData:{
                  classname:'',
                  status:1,
                  id:''
            },
            oldvalue:'',
            rules:{
                  classname:[
                        {required:true,message:'请输入班级',trigger:'blur'},
                        {min:2,max:4,message:'班级名称在2~4位字符间',trigger:'blur'},
                        {validator:classnameExist, trigger: "blur" }
                  ]
            }
    };
  },
  methods: {
      // 获取用户信息方法
    getClassesList() {
            this.treeLoading=true
            this.$http.get(`/classes/list?pagesize=${this.pagesize}&currentpage=${this.currentPage}`).then(result => {
                  if (result.data.error > 0 &&result.data.error==4) {
                        this.$router.push('/users/login')
                        return
                  }
                  this.treeLoading=false
                  this.tableData = result.data.data;
                  this.total=result.data.total
            }).catch(error=>{
                  console.log(error)
            });
    },
       // 操作方法    
    select(obj){
          switch(obj.type){
                case 'edit':
                  this.classesEdit(obj.data);
                break;
                case 'delete':
                  this.classesDelete(obj.id)
                break;
                default:;
          }
    },
      //  删除用户信息方法   
    classesDelete(id){
          this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
                  confirmButtonText: '确定',
                  cancelButtonText: '取消',
                  type: 'warning'
            }).then(() => {
                  this.$http.get(`/classes/delete?id=${id}`).then(result=>{
                        if(result.data.error==0){
                              this.getClassesList()
                              this.$message({
                              type: 'success',
                              message: '删除成功!'}) 
                        }else{
                              this.$message({
                              type: 'danger',
                              message: '删除失败!'})
                        }
                  }).catch(error=>{
                        console.log(error)
                  }) ;
            })   
    },
      //  编辑用户信息方法
      classesEdit(row){
            this.dialogVisible=true
            this.formData.classname=row.classname
            this.formData.status=row.status
            this.formData.id=row.id
            this.oldvalue=row.classname
            this.btnStatus=false
            this.dialogTitle="编辑"
      },
      
      // 编辑确认
      classesEditComfire(){
            this.$refs.formData.validate(pass => {
                  if (!pass) { return}
                  this.btnIcon='el-icon-loading'
                  this.buttonDisabled=true   
                  this.$http.post("/classes/edit", this.$qs.stringify(this.formData)).then(result => {
                        if(result.data.error==0){
                              this.btnIcon=''
                              this.buttonDisabled=false  
                              this.getClassesList()
                              this.dialogVisible=false
                              this.btnStatus=true
                        }
                  }).catch(error=>{
                        console.log(eror)
                  });
      });
      },
      // 添加确认
      classesAddComfire(){
            this.$refs.formData.validate(pass => {
                  if (!pass) { return}
                  this.btnIcon='el-icon-loading'
                  this.buttonDisabled=true   
                  this.$http.post("/classes/add", this.$qs.stringify(this.formData)).then(result => {
                        if(result.data.error==0){
                              this.btnIcon=''
                              this.buttonDisabled=false  
                              this.getClassesList()
                              this.dialogVisible=false
                        }
                  }).catch(error=>{
                        console.log(error)
                  });
            })
      },
        //  重置表单的方法   
      resetForm() {
            this.$refs.formData.resetFields();
            this.formData.pid=0
      },
      //   pagesize改变时的方法
      onchange(val){
            this.pagesize=val
            this.getClassesList()
      },
     
  },
  created() {
      //   调用获取用户信息方法
    this.getClassesList();
  }
};
</script>
<style>
.show{
      color: #409EFF
}
.hide{
      color: #909399
}
</style>


